<template>
	<view class="addStore-container">
		<view class="formCard">
			<!-- 商户名称 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>商户名称</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<u-input v-model="formData.storeName" :disabled="pageType == 'auditing'" placeholder="请输入商户名称" type="text" />
					</view>
				</view>
			</view>
			<!-- 商户门头照片 -->
			<view class="formCard-item upload-item">
				<view class="item-title">
					<view class="title-label">
						<text>商户门头照片（{{ formData.storeOutImg.length }}/1）</text>
						<text class="required">*</text>
					</view>
					<view v-if="pageType != 'modify'" class="title-value">请上传照片</view>
				</view>
				<view class="item-content">
					<image
						@click="uploadImage('storeOutImg')"
						v-if="formData.storeOutImg.length < 1 && pageType != 'auditing'"
						class="uploadCover"
						src="@/static/addStore/uploadCover.png"
					/>
					<!-- 上传加载中ing -->
					<view v-if="storeOutImgUploadLoading" class="storeOutImgUploadLoading uploadLoading">
						<u-loading mode="circle"></u-loading>
					</view>
					<!-- 已上传的照片循环项 -->
					<view v-for="(item, index) in formData.storeOutImg" :key="index" class="uploadImg">
						<image :src="item" />
						<image @click="deletePic('storeOutImg', index)" v-if="pageType != 'auditing'" class="delete" src="@/static/addStore/deleteIMG.png" />
					</view>
				</view>
			</view>
			<!-- 商户店内照片 -->
			<view class="formCard-item upload-item">
				<view class="item-title">
					<view class="title-label">
						<text>商户店内照片（{{ formData.storeInImg.length }}/1）</text>
						<text class="required">*</text>
					</view>
					<view v-if="pageType != 'modify'" class="title-value">请上传照片</view>
				</view>
				<view class="item-content">
					<image
						@click="uploadImage('storeInImg')"
						v-if="formData.storeInImg.length < 1 && pageType != 'auditing'"
						class="uploadCover"
						src="@/static/addStore/uploadCover.png"
					/>
					<!-- 上传加载中ing -->
					<view v-if="storeInImgUploadLoading" class="storeOutImgUploadLoading uploadLoading">
						<u-loading mode="circle"></u-loading>
					</view>
					<!-- 已上传的照片循环项 -->
					<view v-for="(item, index) in formData.storeInImg" :key="index" class="uploadImg">
						<image :src="item" />
						<image @click="deletePic('storeInImg', index)" v-if="pageType != 'auditing'" class="delete" src="@/static/addStore/deleteIMG.png" />
					</view>
				</view>
			</view>
			<!-- 定位地址 -->
			<view @click="toMap" class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>定位地址</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<text v-if="formData.locationAddress" class="value">{{ formData.locationAddress }}</text>
						<text v-else class="coverText">点击选择定位地址</text>
						<image class="location" src="@/static/addStore/location-Icon.png" />
					</view>
				</view>
			</view>
			<!-- 详细地址 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>详细地址</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<u-input v-model="formData.detailAddress" :disabled="pageType == 'auditing'" placeholder="请输入详细地址" type="text" />
					</view>
				</view>
			</view>
			<!-- 营业时间 -->
			<view @click="setBusinessTimePopupShow" class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>营业时间</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<text class="value">
							{{ formData.businessTime[0][0] }}:{{ formData.businessTime[0][1] }}-{{ formData.businessTime[1][0] }}:{{ formData.businessTime[1][1] }}
						</text>
						<image class="goIcon" src="@/static/addStore/goIcon-999.png" />
					</view>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>联系人</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<u-input v-model="formData.contactName" :disabled="pageType == 'modify'" placeholder="请输入联系人" type="text" />
					</view>
				</view>
			</view>
			<!-- 身份证号 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>身份证号</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<u-input v-model="formData.contactsIdCard" :disabled="pageType == 'modify'" placeholder="请输入身份证号" maxlength="18" type="text" />
					</view>
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>联系电话</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<u-input v-model="formData.contactPhone" :disabled="pageType == 'modify'" placeholder="请输入联系电话" maxlength="11" type="text" />
					</view>
				</view>
			</view>
			<!-- 网点状态 -->
			<view class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>商户状态</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<text v-if="formData.storeStatus" style="color: #333">已开启</text>
						<text v-else>未开启</text>
						<u-switch v-model="formData.storeStatus" :disabled="pageType == 'auditing'" active-color="#00C582" style="margin-left: 6px"></u-switch>
					</view>
				</view>
			</view>
			<!-- 行业属性 -->
			<view @click="setIndustryAttributePopupShow" class="formCard-item">
				<view class="item-title">
					<view class="title-label">
						<text>行业属性</text>
						<text class="required">*</text>
					</view>
					<view class="title-value">
						<text v-if="formData.industryAttribute && industryList.length" class="value">
							{{ industryList.find((item) => item.code == formData.industryAttribute)?.textLanguage }}
						</text>
						<text v-else>请选择</text>
						<image class="goIcon" src="@/static/addStore/goIcon-999.png" />
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 底部提交审核按钮组 -->
	<view class="footer">
		<view @click="submitAudit" v-if="pageType != 'auditing'" class="button">提交审核</view>
		<view v-else class="auditing-btnBox">
			<view @click="accessApply_debounce(2)" class="Reject">驳回申请</view>
			<view @click="accessApply_debounce(1)" class="pass">审核通过</view>
		</view>
	</view>

	<!-- 营业时间选择picker -->
	<cdsTimeRangePicker v-model="BusinessTimePopupShow" @confirm="BusinessTimePopupConfirm" title="营业时间" />

	<!-- 行业属性选择picker -->
	<cdsPicker v-model="industryAttributePopupShow" @confirm="industryAttributePopupConfirm" title="行业属性">
		<template v-slot:body>
			<industryAttribute v-model="industryList" :formData="formData" @chooseIndustry="chooseIndustry" />
		</template>
	</cdsPicker>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import cdsTimeRangePicker from '@/subPages/components/cds-timeRange-picker/index.vue';
import cdsPicker from '@/subPages/components/cds-picker/index.vue';
import industryAttribute from '@/subPages/components/industryAttribute/index.vue';
import { getIndustryList, uploadBase64Img } from '@/api/addStore.js';

// 获取选择的地址
uni.$on('chooseAddress', (e) => {
	console.log('拿到选择的地址：', e);
	formData.value.locationAddress = e.address + e.name;
	formData.value.mapLongitude = e.location.split(',')[0];
	formData.value.mapLatitude = e.location.split(',')[1];

	console.log(formData.value, '8848');
});

// 页面类型
const pageType = ref('');

// 表单的绑定数据
const formData = ref({
	storeName: '', // 商户名称
	storeOutImg: [], // 商户门头照片
	storeInImg: [], // 商户内部照片
	locationAddress: '', // 定位地址
	mapLongitude: '', // 地图经度
	mapLatitude: '', // 地图纬度
	detailAddress: '', // 详细地址
	businessTime: [
		['00', '00'],
		['23', '59']
	], // 营业时间
	contactName: '', // 联系人
	contactsIdCard: '', // 联系人身份证
	contactPhone: '', // 联系电话
	storeStatus: true, // 网点状态
	industryAttribute: '-1', // 行业属性
	region: '' // 行政区划字符串
});

// 商户门头照片上传loading
const storeOutImgUploadLoading = ref(false);
// 商户店内照片上传loading
const storeInImgUploadLoading = ref(false);

// 图片上传
const uploadImage = (type) => {
	uni.chooseMedia({
		count: 1,
		sourceType: ['album', 'camera'],
		success: (res) => {
			console.log(res);
			console.log(res.tempFiles[0].tempFilePath);
			// formData.value[type].push(res.tempFiles[0].tempFilePath);
			const fileType = res.tempFiles[0].tempFilePath.split('.')[1];

			const fs = uni.getFileSystemManager();
			fs.readFile({
				filePath: res.tempFiles[0].tempFilePath,
				encoding: 'base64',
				success: function (readRes) {
					console.log(readRes, '88888');
					const base64Data = readRes.data;
					// console.log(base64Data);
					uploadBase64ImgFun(base64Data, type, fileType);
				},
				fail: function (err) {
					console.log('读取文件失败：', err);
				}
			});
		},
		fail: (err) => {
			console.log('选择图片失败:', err);
		}
	});
};

// 上传图片
const uploadBase64ImgFun = async (base64, type, fileType) => {
	console.log(base64, type);

	if (type == 'storeOutImg') {
		storeOutImgUploadLoading.value = true;
	} else if (type == 'storeInImg') {
		storeInImgUploadLoading.value = true;
	}

	let res = await uploadBase64Img({
		fileBase64: `data:image/${fileType};base64,` + base64,
		type: '.' + fileType
	});

	if (res.code == 200) {
		formData.value[type].push(res.data);
	}

	if (type == 'storeOutImg') {
		storeOutImgUploadLoading.value = false;
	} else if (type == 'storeInImg') {
		storeInImgUploadLoading.value = false;
	}
};

// 删除本地照片
const deletePic = (type, index) => {
	formData.value[type].splice(index, 1);
};

// 打开营业时间弹窗
const BusinessTimePopupShow = ref(false);
const setBusinessTimePopupShow = () => {
	BusinessTimePopupShow.value = true;
};

// 营业时间弹窗确认
const BusinessTimePopupConfirm = (e) => {
	console.log(e, '--------------------');
	formData.value.businessTime = e;
	BusinessTimePopupShow.value = false;
};

// 获取行业属性列表
const industryList = ref([]);
const getIndustryListData = async () => {
	let res = await getIndustryList();
	industryList.value = res.data;
};
getIndustryListData();

// 打开行业属性弹窗
const industryAttributePopupShow = ref(false);
const setIndustryAttributePopupShow = () => {
	industryAttributePopupShow.value = true;
};

// 选择行业属性
const chooseIndustry = (e) => {
	console.log(e, '选择的行业属性');
	formData.value.industryAttribute = e.code + '';
};

// 行业属性弹窗确认
const industryAttributePopupConfirm = () => {
	industryAttributePopupShow.value = false;
};

// 提交申请
const submitAudit_debounce = () => {};

// 审核通过/驳回
const accessApply_debounce = () => {};

// 跳转到地图定位页面
const toMap = () => {
	uni.navigateTo({
		url: '/subPages/map/index'
	});
};

// 提交审核
const submitAudit = () => {
	const submitData = {
		id: SiteId.value,
		name: formData.value.storeName,
		doorPhoto: formData.value.storeOutImg.join(','),
		photo: formData.value.storeInImg.join(','),
		mapLongitude: formData.value.mapLongitude,
		mapLatitude: formData.value.mapLatitude,
		location: formData.value.locationAddress,
		address: formData.value.detailAddress,
		openTime: time1 + ' ' + ':' + ' ' + time2 + ' ' + '-' + ' ' + time3 + ' ' + ':' + ' ' + time4,
		contacts: formData.value.contactName,
		contactsIdCard: formData.value.contactsIdCard.toLocaleUpperCase(),
		tel: formData.value.contactPhone,
		disabled: formData.value.storeStatus ? 0 : 1,
		categoryCode: formData.value.industryAttribute,
		background: formData.value.storeOutImg[0],
		hdlevel: formData.value.hdlevel,
		region: formData.value.region
	};
};

onLoad((option) => {
	console.log('option', option);
});
</script>

<style lang="scss" scoped>
.addStore-container {
	min-height: 100vh;
	padding: 24rpx 24rpx 210rpx;
	background-color: #f9f9f9;

	.formCard {
		padding: 0 24rpx;
		border-radius: 24rpx;
		background-color: #fff;

		.formCard-item {
			display: flex;
			flex-direction: column;
			padding: 32rpx 0;
			border-bottom: 2rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.item-title {
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.title-label {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #333;
					min-width: 5em;

					.required {
						color: #fe4033;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 34rpx;
						margin-left: 8rpx;
					}
				}

				.title-value {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #ccc;
					text-align: right;

					.value {
						flex: 1;
						color: #333;
					}

					:deep(.u-input__input) {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						text-align: right;
						color: #333;
						border: none;
						min-width: 100%;

						&::placeholder {
							font-family: PingFang SC;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #ccc;
						}
					}

					.location {
						width: 36rpx;
						height: 36rpx;
						margin-left: 12rpx;
					}

					.value {
						color: #333;
					}

					.goIcon {
						width: 10rpx;
						height: 16rpx;
						margin-left: 14rpx;
					}
				}
			}

			.item-content {
				position: relative;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 24rpx;
				margin-top: 24rpx;

				.uploadCover {
					width: 202rpx;
					height: 202rpx;
				}

				.uploadLoading {
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 202rpx;
					height: 202rpx;
					border-radius: 24rpx;
					background-color: rgba(0, 0, 0, 0.5);
				}

				.uploadImg {
					position: relative;
					width: 202rpx;
					height: 202rpx;
					border-radius: 24rpx;
					background-color: #f9f9f9;

					image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx;
						object-fit: contain;
					}

					.delete {
						position: absolute;
						top: 0;
						right: 0;
						transform: translate(30%, -30%);
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.upload-item {
			padding-bottom: 24rpx;
		}
	}
}

.footer {
	position: fixed;
	display: flex;
	justify-content: center;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 190rpx;
	background-color: #fff;
	z-index: 999;

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		width: 646rpx;
		height: 98rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		border-radius: 96rpx;
		background-color: #00c582;
		margin-top: 24rpx;
	}

	.auditing-btnBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24rpx;

		.Reject,
		.pass {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 338rpx;
			height: 98rpx;
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			border-radius: 96rpx;
		}

		.Reject {
			color: #fe4033;
			border: 2rpx solid #fe4033;
		}

		.pass {
			color: #fff;
			background-color: #00c582;
		}
	}
}
</style>
